<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>StyleBootstrap.info</title>
    <meta name="description" content="Create unique Twitter Boostrap design">
    <meta name="author" content="Tomas Markevicius">
 
    
    <!-- Le HTML5 shim, for IE6-8 support of HTML elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le styles -->
    <style>
      .smaller {
      	width: 60px !important;
      	margin-left: 5px;
      }
    </style>
    {% stylesheets
        '@HotelamericaBundle/Resources/public/css/PbjMWcZS6SI5VuaJKeK0R.css'
        '@HotelamericaBundle/Resources/public/css/docs.css'
        '@HotelamericaBundle/Resources/public/css/jPicker.css'
        '@HotelamericaBundle/Resources/public/css/jPicker-1.1.6.min.css'

   %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
   {% endstylesheets %}

  </head>
<script type="text/javascript" src="{{ asset('default/js/jpicker-1.1.6.min.js') }}"></script>
<script type="text/javascript" src="{{ asset('default/js/my.js') }}"></script>

 <script type="text/javascript" src="{{ asset('default/js/jquery-1.7.2.min.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/bootstrap.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/Jfunciones.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/bootstrap-carousel.js') }}"></script>
    
    <link type="text/css" href="{{ asset('default/css/ui-lightness/jquery-ui-1.8.21.custom.css') }}" rel="stylesheet" />
    <script type="text/javascript" src="{{ asset('default/js/jquery-ui-1.8.21.custom.min.js') }}"></script>

    <link type="text/css" href="{{ asset('default/css/themes/jquery.ui.core.css') }}" rel="stylesheet" />
    <link type="text/css" href="{{ asset('default/css/themes/jquery.ui.theme.css') }}" rel="stylesheet" />
    <link type="text/css" href="{{ asset('default/css/themes/jquery.ui.selectmenu.css') }}" rel="stylesheet" />
    <script type="text/javascript" src="{{ asset('default/js/ui/jquery.ui.core.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/ui/jquery.ui.widget.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/ui/jquery.ui.position.js') }}"></script>
    <script type="text/javascript" src="{{ asset('default/js/ui/jquery.ui.selectmenu.js') }}"></script>

    
<body data-spy="scroll" data-target=".subnav" data-offset="50">
   
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = "//connect.facebook.net/lt_LT/all.js#xfbml=1";
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

<div class="container">


<!-- Masthead
================================================== -->
<header class="jumbotron jumbotron1 subhead" id="overview" 
style="margin: -75px 0 -25px;">
<div style="float: left">
  <h1>StyleBootstrap.info</h1>
  <p class="lead">
  	Create unique design with Bootstrap v2
  </p>
</div>
<div style="float: right">
		<a href="otherStyles/PbjMWcZS6SI5VuaJKeK0R.css" class="btn btn-large btn-danger">
		Download this page's style
	</a>
		<br /><br />
	<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://stylebootstrap.info" data-text="Check this!">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<div class="fb-like" data-href="http://stylebootstrap.info" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></div>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" style="border: none">
<input type="hidden" name="cmd" value="_s-xclick">
<input type="hidden" name="hosted_button_id" value="2MVDXTP2EPND6">
<input type="image" src="https://www.paypalobjects.com/en_US/i/btn/btn_donate_SM.gif" border="none" name="submit" alt="PayPal - The safer, easier way to pay online!">
<img alt="" border="0" src="https://www.paypalobjects.com/en_US/i/scr/pixel.gif" width="1" height="1">
</form>


	
</div>
<div style="clear: both"></div>
  <div class="subnav">
    <ul class="nav nav-pills" >
      <li><a href="#navbar">Navbar</a></li>
      <li><a href="#body">Body</a></li>
      <li><a href="#typography">Typography</a></li>
      <li><a href="#buttons">Buttons</a></li>
      <li><a href="#form">Forms</a></li>
      <li><a href="#miscellaneous">Miscellaneous</a></li>
      <li><a href="index.php?style=CzgXwxyLQK5cfezun989X">Example</a></li>
      <li><a href="#getPage">
      	Get this style &nbsp;
      	<i class="icon-download-alt" style="opacity:0.8"></i>
      	</a>
      	</li>
      <li><a href="http://wrapbootstrap.com/" target="_blank"><strong>WrapBootstrap</strong> <i class="icon-share-alt"></i></li>

      	<div style="float:right; margin-top:8px">
        <a href="#navbar" class="showOtherJum" style="font-size:13px">
      		<i class="icon-star" style="opacity:0.3"></i> 
      		I am a Web/Software Developer. Will work for bacon.
      		<i class="icon-star" style="opacity:0.3"></i> 
      	</a> 
   	 	</div>
   	 	<div style="clear:both"></div>
    </ul> 
  </div>
</header>

<center style="margin: 40px 0 -65px">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9234056673577342";
/* stylebootstrap */
google_ad_slot = "7268290560";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>

<header class="jumbotron subhead jumbotron2" id="overview2" 
style="display: none;">
<div style="clear: both"></div>
  <div class="subnav" style="padding: 25px; height: 30px">
    <ul class="nav nav-pills" >
      	<div style="font-size:16px; color: #141414; padding: 2px; text-align: center; line-height: 25px">
      		tomas.lietuva(eta)gmail.com 
      		&nbsp; &nbsp;
      		
      		<a href="#" id="closeMe">Close it</a>
      	
   	 	</div>
   	 	<div style="clear:both"></div>
    </ul> 
  </div>
</header>


<script type="text/javascript">        
$(document).ready(function() { 
	var color = [];
	
	$('.showOtherJum').bind('click', function() {
		$('.jumbotron').fadeOut();
		$('.jumbotron2').fadeIn();
	})
	$('#closeMe').bind('click', function() {
		$('.jumbotron').fadeIn();
		$('.jumbotron2').fadeOut();
	})	
	
	$('.top').click(function() {
		$("html, body").animate({ scrollTop: "0px" }, 1500);
	})
	
	$('#i0').val('333333');$('#i1').val('222222');$('#i2').val('ffffff');$('#i3').val('999999');$('#i4').val('ffffff');$('#i5').val('222222');$('#i6').val('333333');$('#i7').val('8px 20px 12px');$('#i8').val('10px 10px 11px');$('#i9').val('40px');$('#i10').val('20px');$('#i11').val('13px');$('#i12').val('"Helvetica Neue", Helvetica, Arial, sans-serif');$('#i13').val('ffffff');$('#i14').val('13px');$('#i15').val('333333');$('#i16').val('f5f5f5');$('#i17').val('333333');$('#i18').val('999999');$('#i19').val('0088cc');$('#i20').val('16px');$('#i21').val('eeeeee');$('#i22').val('1px');$('#i23').val('0088cc');$('#i24').val('0044cc');$('#i25').val('ffffff');$('#i26').val('ffffff');$('#i27').val('e6e6e6');$('#i28').val('333333');$('#i29').val('fbb450');$('#i30').val('f89406');$('#i31').val('ffffff');$('#i32').val('ee5f5b');$('#i33').val('bd362f');$('#i34').val('ffffff');$('#i35').val('62c462');$('#i36').val('51a351');$('#i37').val('ffffff');$('#i38').val('5bc0de');$('#i39').val('2f96b4');$('#i40').val('ffffff');$('#i41').val('ffffff');$('#i42').val('555555');$('#i43').val('4px 4px 4px 4px');$('#i44').val('1px solid #ccc');$('#i45').val('13px');$('#i46').val('999999');$('#i47').val('468847');$('#i48').val('f89406');$('#i49').val('b94a48');$('#i50').val('3a87ad');$('#i51').val('ffffff');$('#i52').val('1px 3px 2px');$('#i53').val('9.75px');$('#i54').val('1px solid #e5e5e5');$('#i55').val('1px solid #ffffff');$('#i56').val('8px 35px 8px 14px');$('#i57').val('fcf8e3');$('#i58').val('1px solid #fbeed5');$('#i59').val('fcf8e3');$('#i60').val('dff0d8');$('#i61').val('d6e9c6');$('#i62').val('468847');$('#i63').val('f2dede');$('#i64').val('eed3d7');$('#i65').val('b94a48');$('#i66').val('d9edf7');$('#i67').val('bce8f1');$('#i68').val('3a87ad');	
	eaching(1);
	changeNav(color);
	
	$('a, button').each(function(index) {
		$(this).mouseover();
	})
	
	$(".getIT").click(function() {
		$.post("generate.php", {'colors[]':color}, function(data) {
			window.location.href = "http://StyleBootstrap.info/index.php?style="+data;
		})
	})

	
	function eaching(i)
	{
		$('.navy').each(function(index) {
			var id = $(this).attr("id");
			color[index] = $("#"+id).val();
			if(i == 1 && !$('#'+id).hasClass("noInclude")) 
				change(id);
		})
	}
	
	$(".navy").bind('change click focus unfocus mousehover', function() {
		eaching(0);
		changeNav(color);
	}) 
});
</script>

<!-- Navbar
================================================== -->
<section id="navbar">
  <div class="page-header">
    <h1>Navbar</h1>
  </div>
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container" style="width: auto;">
        <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </a>
        <a class="brand" href="#">Project name</a>
        <div class="nav-collapse">
          <ul class="nav">
            <li><a href="#">Home</a></li>
            <li class="divider-vertical"></li>
            <li class="active"><a href="#">Miracle</a></li>
            <li class="divider-vertical"></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
          <ul class="nav pull-right">
            <li><a href="#">Link</a></li>
            <li class="divider-vertical"></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.nav-collapse -->
      </div>
    </div><!-- /navbar-inner -->
  </div><!-- /navbar -->


Background: 
<input id="i0" class="navy smaller" type="text" value="333333" /> 
<input id="i1" class="navy smaller" type="text" value="222222" />

Fonts: 
<input id="i2" class="navy smaller" type="text" value="ffffff" />
<input id="i3" class="navy smaller" type="text" value="999999" />
<input id="i4" class="navy smaller" type="text" value="ffffff" />

Divider: 
<input id="i5" class="navy smaller" type="text" value="222222" />
<input id="i6" class="navy smaller" type="text" value="333333" />
<br />

Brand padding: 
<input type="text" id="i7" class="navy noInclude" value="8px 20px 12px">

Button padding:
<input type="text" id="i8" class="navy noInclude" value="10px 10px 11px">

Divider height:
<input type="text" id="i9" class="navy noInclude smaller" value="40px">

<br />

Brand font-size: 
<input type="text" id="i10" class="navy noInclude smaller" value="20px">

Button font-size: 
<input type="text" id="i11" class="navy noInclude smaller" value="13px">
 
</section>

<section id="body">
<div class="page-header">
	<h1>Body</h1>
</div>	

	Font-family: 
	<input type="text" id="i12" class="navy noInclude" value='"Helvetica Neue", Helvetica, Arial, sans-serif' />
	
	Background: 
	<input id="i13" class="navy smaller" type="text" value="ffffff" />
	
	Font-size: 
	<input id="i14" class="navy smaller noInclude" type="text" value="13px" />
	
	Color: 
	<input id="i15" class="navy smaller" type="text" value="333333" />

</section>



<!-- Typography
================================================== -->
<section id="typography">
  <div class="page-header">
    <h1>Typography</h1>
  </div>

  <!-- Headings & Paragraph Copy -->
  <div class="row">
	  
    <div class="span4">
      <div class="well">
        <h1>h1. Heading 1</h1>
        <h2>h2. Heading 2</h2>
        <h3>h3. Heading 3</h3>
        <h4>h4. Heading 4</h4>
        <h5>h5. Heading 5</h5>
        <h6>h6. Heading 6</h6>
      </div>
    </div>
	  
    <div class="span4">
      <h3>Example body text</h3>
      <p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
      <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec sed odio dui.</p>
    </div>
	
    <div class="span4">
      <h3>Example addresses</h3>
      <address>
        <strong>Twitter, Inc.</strong><br>
        795 Folsom Ave, Suite 600<br>
        San Francisco, CA 94107<br>
        <abbr title="Phone">P:</abbr> (123) 456-7890
      </address>
      <address>
        <strong>Full Name</strong><br>
        <a href="mailto:#">first.last@gmail.com</a>
      </address>
    </div>

  </div>

Well background-color: 
<input id="i16" class="navy smaller" type="text" value="f5f5f5" />

H color: 
<input id="i17" class="navy smaller" type="text" value="333333" />

H6 color: 
<input id="i18" class="navy smaller" type="text" value="999999" />

a color: 
<input id="i19" class="navy smaller" type="text" value="0088cc" />

<br />

p font-size: 
<input id="i20" class="navy smaller noInclude" type="text" value="16px" />

Page-header divider: 
<input id="i21" class="navy smaller" type="text" value="eeeeee" />

Page-header border: 
<input id="i22" class="navy smaller noInclude" type="text" value="1px" />

</section>

<center style="margin: 25px 0 -65px">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9234056673577342";
/* stylebootstrapText */
google_ad_slot = "6669185832";
google_ad_width = 728;
google_ad_height = 15;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>
<!-- Buttons
================================================== -->
<style>
table td {
	padding: 0 45px 10px 0;
}
</style>

<section id="buttons">
  <div class="page-header">
    <h1>Buttons</h1>
  </div>
  
Primary: 
<input id="i23" class="navy smaller" type="text" value="0088cc" />
<input id="i24" class="navy smaller" type="text" value="0044cc" />
<input id="i25" class="navy smaller" type="text" value="ffffff" />

Default: 
<input id="i26" class="navy smaller" type="text" value="ffffff" />
<input id="i27" class="navy smaller" type="text" value="e6e6e6" />
<input id="i28" class="navy smaller" type="text" value="333333" />

Warning: 
<input id="i29" class="navy smaller" type="text" value="fbb450" />
<input id="i30" class="navy smaller" type="text" value="f89406" />
<input id="i31" class="navy smaller" type="text" value="ffffff" />

<br />

Danger: 
<input id="i32" class="navy smaller" type="text" value="ee5f5b" />
<input id="i33" class="navy smaller" type="text" value="bd362f" />
<input id="i34" class="navy smaller" type="text" value="ffffff" />

Success: 
<input id="i35" class="navy smaller" type="text" value="62c462" />
<input id="i36" class="navy smaller" type="text" value="51a351" />
<input id="i37" class="navy smaller" type="text" value="ffffff" />

Info: 
<input id="i38" class="navy smaller" type="text" value="5bc0de" />
<input id="i39" class="navy smaller" type="text" value="2f96b4" />
<input id="i40" class="navy smaller" type="text" value="ffffff" />

<br /><br />

  <table>
    <tbody>
      <tr>
        <td><a class="btn" href="#">Default</a></td>
        <td><a class="btn btn-large" href="#">Default</a></td>
        <td><a class="btn btn-small" href="#">Default</a></td>
        <td><a class="btn disabled" href="#">Default</a></td>
        <td><a class="btn" href="#"><i class="icon-cog"></i> Default</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn" href="#">Default</a>
	          <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
      <tr>
        <td><a class="btn btn-primary" href="#">Primary</a></td>
        <td><a class="btn btn-primary btn-large" href="#">Primary</a></td>
        <td><a class="btn btn-primary btn-small" href="#">Primary</a></td>
        <td><a class="btn btn-primary disabled" href="#">Primary</a></td>
        <td><a class="btn btn-primary" href="#"><i class="icon-shopping-cart icon-white"></i> Primary</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn btn-primary" href="#">Primary</a>
	          <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
      <tr>
        <td><a class="btn btn-info" href="#">Info</a></td>
        <td><a class="btn btn-info btn-large" href="#">Info</a></td>
        <td><a class="btn btn-info btn-small" href="#">Info</a></td>
        <td><a class="btn btn-info disabled" href="#">Info</a></td>
        <td><a class="btn btn-info" href="#"><i class="icon-exclamation-sign icon-white"></i> Info</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn btn-info" href="#">Info</a>
	          <a class="btn btn-info dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
      <tr>
        <td><a class="btn btn-success" href="#">Success</a></td>
        <td><a class="btn btn-success btn-large" href="#">Success</a></td>
        <td><a class="btn btn-success btn-small" href="#">Success</a></td>
        <td><a class="btn btn-success disabled" href="#">Success</a></td>
        <td><a class="btn btn-success" href="#"><i class="icon-ok icon-white"></i> Success</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn btn-success" href="#">Success</a>
	          <a class="btn btn-success dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
      <tr>
        <td><a class="btn btn-warning" href="#">Warning</a></td>
        <td><a class="btn btn-warning btn-large" href="#">Warning</a></td>
        <td><a class="btn btn-warning btn-small" href="#">Warning</a></td>
        <td><a class="btn btn-warning disabled" href="#">Warning</a></td>
        <td><a class="btn btn-warning" href="#"><i class="icon-warning-sign icon-white"></i> Warning</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn btn-warning" href="#">Warning</a>
	          <a class="btn btn-warning dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
      <tr>
        <td><a class="btn btn-danger" href="#">Danger</a></td>
        <td><a class="btn btn-danger btn-large" href="#">Danger</a></td>
        <td><a class="btn btn-danger btn-small" href="#">Danger</a></td>
        <td><a class="btn btn-danger disabled" href="#">Danger</a></td>
        <td><a class="btn btn-danger" href="#"><i class="icon-remove icon-white"></i> Danger</a></td>
		<td>
	        <div class="btn-group">
	          <a class="btn btn-danger" href="#">Danger</a>
	          <a class="btn btn-danger dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
	          <ul class="dropdown-menu">
	            <li><a href="#">Action</a></li>
	            <li><a href="#">Another action</a></li>
	            <li><a href="#">Something else here</a></li>
	            <li class="divider"></li>
	            <li><a href="#">Separated link</a></li>
	          </ul>
	        </div><!-- /btn-group -->
		</td>
      </tr>
    </tbody>
  </table>

</section>


<section id="form">
  <div class="page-header">
    <h1>Forms</h1>
  </div>

Backgroung-color:
<input id="i41" class="navy smaller" type="text" value="ffffff" /> 

Color: <input id="i42" class="navy smaller" type="text" value="555555" />

Padding: <input id="i43" class="navy noInclude" type="text" value="4px 4px 4px 4px" />
  <br />
Border: <input id="i44" class="navy noInclude" type="text" value="1px solid #ccc" />

Font-size: <input id="i45" class="navy noInclude smaller" type="text" value="13px" />




<br />
<br />

<form class="form-horizontal" onsubmit="return false;">
    <fieldset>
      <div class="control-group">
        <label class="control-label" for="input01">Text input</label>
        <div class="controls">
          <input type="text" class="input-xlarge trololo" id="input01">
          <p class="help-block">In addition to freeform text, any HTML5 text-based input appears like so.</p>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="optionsCheckbox">Checkbox</label>
        <div class="controls">
          <label class="checkbox">
            <input type="checkbox" class="trololo" id="optionsCheckbox" value="option1">
            Option one is this and that&mdash;be sure to include why it's great
          </label>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="select01">Select list</label>
        <div class="controls">
          <select id="select01" class="trololo">
            <option>something</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="multiSelect">Multicon-select</label>
        <div class="controls">
          <select multiple="multiple" id="multiSelect" class="trololo">
            <option>1</option>
            <option>2</option>
            <option>3</option>
            <option>4</option>
            <option>5</option>
          </select>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="fileInput">File input</label>
        <div class="controls">
          <input class="input-file" id="fileInput" class="trololo" type="file">
        </div>
      </div>
      <div class="control-group">
        <label class="control-label" for="textarea">Textarea</label>
        <div class="controls">
          <textarea class="input-xlarge trololo" id="textarea" rows="3"></textarea>
        </div>
      </div>
      <div>
        <button type="submit" class="btn btn-primary">Save changes</button>
        <button class="btn">Cancel</button>
      </div>
    </fieldset>
  </form>
</section>

<!-- miscellaneous
================================================== -->
<section id="miscellaneous">
  <div class="page-header">
    <h1>Miscellaneous</h1>
  </div>
  
Default:
<input id="i46" class="navy smaller" type="text" value="999999" />

Success:
<input id="i47" class="navy smaller" type="text" value="468847" />

Warning:
<input id="i48" class="navy smaller" type="text" value="f89406" />

Important:
<input id="i49" class="navy smaller" type="text" value="b94a48" />

Info:
<input id="i50" class="navy smaller" type="text" value="3a87ad" />

<br />

Color: <input id="i51" class="navy smaller" type="text" value="ffffff" />
Padding: <input id="i52" class="navy noInclude" type="text" value="1px 3px 2px" />
Font-size: <input id="i53" class="navy smaller noInclude" type="text" value="9.75px" />
  
 
<br /><br />
<span class="label">Default</span>
<span class="label label-success">Success</span>
<span class="label label-warning">Warning</span>
<span class="label label-important">Important</span>
<span class="label label-info">Info</span>

<hr />

Hr top: <input id="i54" class="navy noInclude" type="text" value="1px solid #e5e5e5" />
Hr bottom: <input id="i55" class="navy noInclude" type="text" value="1px solid #ffffff" />

<hr />


<!-- Alerts & Messages
================================================== -->


<h3 id="alerts">Alerts</h3>

Padding: <input id="i56" class="navy noInclude" type="text" value="8px 35px 8px 14px" />

Background-color: <input id="i57" class="navy smaller" type="text" value="fcf8e3" />

Border: <input id="i58" class="navy noInclude" type="text" value="1px solid #fbeed5" />

<br />

Alert-heading: <input id="i59" class="navy smaller" type="text" value="fcf8e3" />

<br />
Success (bg-color/border-color/text color): 
<input id="i60" class="navy smaller" type="text" value="dff0d8" />
<input id="i61" class="navy smaller" type="text" value="d6e9c6" />
<input id="i62" class="navy smaller" type="text" value="468847" />
<br />
Danger (bg-color/border-color/text color): 
<input id="i63" class="navy smaller" type="text" value="f2dede" />
<input id="i64" class="navy smaller" type="text" value="eed3d7" />
<input id="i65" class="navy smaller" type="text" value="b94a48" />
<br />
Info (bg-color/border-color/text color): 
<input id="i66" class="navy smaller" type="text" value="d9edf7" />
<input id="i67" class="navy smaller" type="text" value="bce8f1" />
<input id="i68" class="navy smaller" type="text" value="3a87ad" />

<br /><br />

  <div class="row">
	  <div class="span12">
	      <div class="alert alert-block">
	        <a class="close">&times;</a>
	        <h4 class="alert-heading">Alert block</h4>
	        <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
	      </div>
	  </div>
  </div>
  <div class="row">
    <div class="span4">
      <div class="alert alert-danger">
        <a class="close">&times;</a>
        <strong>Error</strong> Change a few things up and try submitting again.
      </div>
    </div>
    <div class="span4">
      <div class="alert alert-success">
        <a class="close">&times;</a>
        <strong>Success</strong> You successfully read this important alert message.
      </div>
    </div>
    <div class="span4">
      <div class="alert alert-info">
        <a class="close">&times;</a>
        <strong>Information</strong> This alert needs your attention, but it's not super important.
      </div>
    </div>
  </div>


</section>

<hr />

</section>

<center style="margin: -10px 0 -70px 0">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9234056673577342";
/* stylebootstrap */
google_ad_slot = "7268290560";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</center>

<section id="getPage">
<button class="btn btn-success getIT" 
style="padding: 95px; width: 100%; font-size: 69px; margin: 25px 0 75px 0"
>Get unique page for this style</button>
</section>

 <!-- Footer
  ================================================== -->

<hr />
    <p class="pull-right"><span class="label label-info top" style="cursor:pointer">Back to top</a></span>
<br /><br />
      
</div> <!-- /container -->

</body>
</html>
